import { QRCodeCanvas } from 'qrcode.react'
import type { FC } from 'react'
import React from 'react'
import { withNativeProps } from '../../../src/utils/native-props'
import { type ComponentProps } from '../../global/common-style'

const classPrefix = `gd-qrcode`

interface ImageSettingsProps {
  src: string
  x: number
  y: number
  height: number
  width: number
  /** excavate
   *  @default {false}
   */
  excavate: boolean
}

export type QrcodeProps = {
  /** qrcode 值
   *  @type {string}
   */
  value: string
  /** level
   *  @type {string ('L' 'M' 'Q' 'H')}
   *  @default 'H'
   */
  level?: 'L' | 'M' | 'Q' | 'H'
  /** size
   * @type {number}
   * @default 160
   */
  size?: number
  /**
   * includeMargin
   * @type {boolean}
   * @default true
   */
  includeMargin?: boolean
  /**
   * bgColor
   * @type {string}
   */
  bgColor?: string
  /**
   * fgColor
   * @type {string}
   */
  fgColor?: string
  /**
   * imageSettings
   * @memberof ImageSettingsProps
   */
  imageSettings?: ImageSettingsProps
} & ComponentProps

export const Qrcode: FC<QrcodeProps> = (props) => {
  const {
    value,
    level = 'L',
    size = 160,
    includeMargin = true,
    bgColor,
    fgColor,
    imageSettings,
  } = props

  return withNativeProps(
    props,
    <div className={`${classPrefix}`}>
      <QRCodeCanvas
        value={JSON.stringify({ data: value })}
        level={level}
        size={size}
        includeMargin={includeMargin}
        bgColor={bgColor}
        fgColor={fgColor}
        imageSettings={imageSettings}
      />
    </div>
  )
}
